const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    // 入口文件
    entry: path.join(__dirname, './src/main.js'),
    // 出口文件
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    devServer: {
        open: true,
        port: 80,
        // host: '192.168.43.196',
        // contentBase: 'src',
        hot: false // vue项目必须是false，否则无法自动刷新
    },
    plugins: [
        new htmlWebpackPlugin({  // 在内存中生成页面。自动添加bundle.js到html中
            template: path.join(__dirname, './src/index.html'),
            filename: 'index.html'
        }),
        new VueLoaderPlugin()
    ],
    module: { // 加载第三方模块加载器
        rules: [ // 匹配文件规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 调用规则从右到左
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']},
            // 如果图片大于等于limit则不会转成base64，否则转成base64
            // [name].[ext] 用于使用图片原名，[hash:8]用于使用9位哈希值（防止不同图片重名）
            { test: /\.(jpg|png|gif|bmg|jpeg)$/, use: ['url-loader?limit=134242&name=[hash:8]-[name].[ext]']},
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: ['url-loader']}, // 处理字体文件
            { test: /\.js$/, exclude: /node_modules/, use: {
                loader:'babel-loader',
                options: {
                    presets: ['@babel/preset-env'],
                    plugins: [
                        ["@babel/plugin-proposal-decorators", { "legacy": true }],
                        ["@babel/plugin-proposal-class-properties", { "loose" : true }]
                    ]
                }
            }},
            { test: /\.vue$/, use: ['vue-loader'] }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.js'
        }
    }
}